<template>
  <div id="exampleView">
    <a-space wrap>
      <a-tag key="0" color="red" closable
        >下面是代码编辑器，默认语言是Java，如需其他语言请自行调用CodeEditor组件</a-tag
      >
    </a-space>
    <CodeEditor :value="codeValue" :handle-change="onCodeChange" />
    <a-space wrap>
      <a-tag key="1" color="#ffb400" :closable="false"
        >以下是MD编辑器，左侧为编辑页，右侧是预览页，如有其他需求，请研究MD的两个组件（在component目录下）</a-tag
      >
    </a-space>
    <MdEditor :value="mdValue" :handle-change="onMdChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import CodeEditor from "@/components/CodeEditor.vue"; // @ is an alias to /src

const mdValue = ref();
const codeValue = ref();

const onMdChange = (v: string) => {
  mdValue.value = v;
};

const onCodeChange = (v: string) => {
  codeValue.value = v;
};
</script>
